import React,{useEffect,useRef,useState} from "react";
import { filterXSS } from 'xss';
import "./cross.css"
export function Cross({setTitle}){
    let [crossList,setCrossList]:[any,Function]=useState([
        {
            name:"夜月归途",
            time:"2023年10月9日",
            content:"这是测试内容"
        },{
            name:"夜月归途",
            time:"2023年10月9日",
            content:"这是测试内容"
        }
    ])
    useEffect(()=>{
        setTitle({TitleData:false})
    },[])
    return <>
        <div className="crossTop">
            <div className="crossTopTitle">我的时光机</div>
            <div className="myCross">我的动态</div>
            <div className="crossTopAction">
                <div className="crossActionItem">
                    <div className="crossActionNumber">
                        0
                    </div>
                    <div className="crossActionText">
                        获赞
                    </div>
                </div>
                <div className="crossActionItem">
                    <div className="crossActionNumber">
                        0
                    </div>
                    <div className="crossActionText">
                        评论
                    </div>
                </div>
                <div className="crossActionItem">
                    <div className="crossActionNumber">
                        0
                    </div>
                    <div className="crossActionText">
                        文章
                    </div>
                </div>
            </div>
        </div>
        {
            crossList.map(cross=>{
                return <div className="crossContainer">
                            <div className="crossContent">
                                <div className="crossItem">
                                    <div className="crossTitle">{cross.name}</div>
                                    <div className="crossInfo" dangerouslySetInnerHTML={{__html:filterXSS(cross.content)}}>
                                    </div>
                                </div>
                            </div>
                        </div>
            })
        }
    </>
}